<!DOCTYPE html>
<title>CSS Values and Units Test: sibling-index() changing registered custom property values during @keyframes animation</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
  @property --time { syntax: "<time>"; initial-value: 0s; inherits: false; }
  @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
  @property --resolution { syntax: "<resolution>"; initial-value: 1dppx; inherits: false; }
  @property --percentage { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
  @property --number { syntax: "<number>"; initial-value: 0; inherits: false; }
  @property --integer { syntax: "<integer>"; initial-value: 0; inherits: false; }
  @property --length { syntax: "<length>"; initial-value: 0px; inherits: false; }
  @property --length-percentage { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
  @property --color { syntax: "<color>"; initial-value: black; inherits: false; }
  @property --list { syntax: "<integer>+"; initial-value: 0; inherits: false; }

  @keyframes --anim {
    from {
      --time: calc(2s * sibling-index());
      --angle: calc(30deg * sibling-index());
      --resolution: calc(1dppx * sibling-index());
      --percentage: calc(50% * sibling-index());
      --number: sibling-index();
      --integer: sibling-index();
      --length: calc(sibling-index() * 7px);
      --length-percentage: calc((sibling-index() * 8px) + (sibling-count() * 5%));
      --color: color(srgb 0 calc(0.2 * sibling-index()) 0);
      --list: 13 sibling-index();
    }
    to {
      --time: 13s;
      --angle: 13deg;
      --resolution: 1dppx;
      --percentage: 13%;
      --number: 13;
      --integer: 13;
      --length: 13px;
      --length-percentage: calc(13px + 7%);
      --color: red;
      --list: 29 sibling-index();
    }
  }
  #target {
    animation: --anim 1000s step-end;
  }
</style>
<div>
  <div id="rm"></div>
  <div></div>
  <div id="target"></div>
</div>
<script>
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--time"), "6s");
  }, "Initially, the sibling-index() is 3 for --time");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "90deg");
  }, "Initially, the sibling-index() is 3 for --angle");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "3dppx");
  }, "Initially, the sibling-index() is 3 for --resolution");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "150%");
  }, "Initially, the sibling-index() is 3 for --percentage");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--number"), "3");
  }, "Initially, the sibling-index() is 3 for --number");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "3");
  }, "Initially, the sibling-index() is 3 for --integer");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--length"), "21px");
  }, "Initially, the sibling-index() is 3 for --length");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(15% + 24px)");
  }, "Initially, the sibling-index() is 3 for --length-percentage");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.6 0)");
  }, "Initially, the sibling-index() is 3 for --color");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--list"), "13 3");
  }, "Initially, the sibling-index() is 3 for --list");

  rm.remove();

  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--time"), "4s");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --time");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "60deg");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --angle");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "2dppx");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --resolution");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "100%");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --percentage");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--number"), "2");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --number");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "2");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --integer");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--length"), "14px");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --length");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(10% + 16px)");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --length-percentage");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.4 0)");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --color");
  test(() => {
    assert_equals(getComputedStyle(target).getPropertyValue("--list"), "13 2");
  }, "Removing a preceding sibling of #target reduces the sibling-index() for --list");

</script>
